<html>
	<head>
		<title>Thermostat</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	</head>
	<script type="text/javascript">
		var baseURL = "http://erasersoftware.org:8080/"
		$(document).ready(function() {
			fillValues();
		});
		function setTemp() {
			$.ajax({ url: baseURL + "setDesiredTemp/" + ftoc($("#newDesiredTemp").val()) });
			fillValues();
		}
		function toggleHeat() {
			$.ajax({ url: baseURL + "toggleHeat"});
			fillValues();
		}
		function fillValues() {
			ctofAjaxVal("getCurrentTemp", $("#tempVal"));
			ctofAjaxVal("getDesiredTemp", $("#desiredTempVal"), function() { $("#newDesiredTemp").val($("#desiredTempVal").html())});
			ajaxVal("isHeating", $("#isHeatingVal"));
			ajaxVal("isHeatingManually", $("#isManuallyHeatingVal"));
		}
		
		function ctofAjaxVal(methodName, field, additionalFunction) {
			ajaxVal(methodName, field,additionalFunction, ctof);
		}
		function ajaxVal(methodName, field, additionalFunction, conversionFunction) {
			$.ajax({
				url: baseURL + methodName,
			}).done(function(data) {
				if(conversionFunction != null)
					data = conversionFunction(data);
				field.html(data);
				if(additionalFunction != null)
					additionalFunction();
			});
		}
		function ctof(c) {
			return (c*(9.0/5.0)+32.0).toFixed(1);
		}
		function ftoc(f) {
			return ((f-32) * (5.0/9.0)).toFixed(5);
		}
	</script>
	<body>
		<ul>
			<li>
				<span class="label">Current Temp: </span>
				<span class="value" id="tempVal" />
			</li>
			<li>
				<span class="label">Desired Temp: </span>
				<span class="value" id="desiredTempVal" />
			</li>
			<li>
				<span class="label">IsHeating: </span>
				<span class="value" id="isHeatingVal" />
			</li>
			<li>
				<span class="label">Is Manually Heating: </span>
				<span class="value" id="isManuallyHeatingVal" />
			</li>
			<li>
				<a href="#" onclick="javascript:toggleHeat();">Toggle Manual Heat</a>
			</li>
			<li>
				<span class="label">New Desired Temperature: </span>
				<input type="text" id="newDesiredTemp" />
				<a href="#" onclick="javascript:setTemp();">Apply</a>
			</li>
			
		</ul>
	</body>
<html>
